<template>
  <div class="form-container">
    <div class="form-header">
      <el-button type="primary" @click="createForm">创建表单</el-button>
    </div>
    <div class="form-body">
      <el-table ref="multipleTable"
                :data="tableData.data"
                tooltip-effect="dark"
                stripe
                highlight-selection-row
                max-height="750"
                style="width: 100%">
        <el-table-column prop="templateName" label="表单名称"></el-table-column>
        <el-table-column prop="state" label="状态">
          <template #default="scope">
            {{ scope.row.state === '0' ? '开启' : '关闭'}}
          </template>
        </el-table-column>
        <el-table-column prop="cert.cnName" label="证件类型"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-link type="primary" style="margin-right: 10px" @click="editForm(scope.row)">修改</el-link>
<!--            <el-link type="warning" style="margin: 0 6px">关闭</el-link>-->
            <el-link type="danger" @click="delForm(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import {_delForm, _getTemplateList} from "../../http/api.js";
import {ElLoading, ElMessage,ElMessageBox} from "element-plus";


const router = useRouter()
const tableData = reactive({
  data:[]
})

// 创建表单
const createForm = () => {
  router.push({ path: '/index/formConfiguration'})
}
// 获取模板
const getTemplateList = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  _getTemplateList()
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          let item = res.data.data;
          tableData.data = item;
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
        ElMessage({message: '网络异常', type: 'error' });
      })
}
getTemplateList();

// 修改模板
const editForm = (item) => {
  console.log(item);
  localStorage.setItem('formData',JSON.stringify(item))
  router.push({ path: '/index/formConfiguration',query:{ id: item.id }})
}
// 删除模板
const delForm = (id) => {
  console.log(id);
  ElMessageBox.confirm('删除模板?','提示', {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'})
      .then(() => {
        _delForm(id)
            .then(res => {
              console.log(res);
              getTemplateList();
            })
            .catch(err => {
              console.log(err);
            })
        ElMessage({ type: 'success', message: '删除成功', })
      })
      .catch(() => {})

}
</script>

<style lang="scss" scoped>
.form-container{
  padding: 10px;
  .form-header{
    padding: 10px;
    background-color: #ffffff;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: right;
  }
  .form-body{
    padding: 20px;
    background-color: #ffffff;
  }
}

</style>
